<template>
	<div class="common-aside">
		<el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
			:collapse="isCollapse" background-color="#66B2FF" active-text-color="#ffd04b" text-color="#fff"
			:router="true">
			<h3 class="aside-title">{{!isCollapse?'医疗档案管理系统':'EMR'}}</h3>

			<!-- 无子菜单的菜单项 -->
			<el-menu-item v-for="item in noChilden" :key="item.name" :index="item.name" :route="item.path">
				<i :class="`el-icon-${item.icon}`"></i>
				<span slot="title">{{item.label}}</span>
			</el-menu-item>

			<!-- 有子菜单的菜单项 -->
			<el-submenu v-for="item in haveChilden" :key="item.name" :index="item.name">
				<template slot="title">
					<i :class="`el-icon-${item.icon}`"></i>
					<span slot="title">{{item.label}}</span>
				</template>
				<el-menu-item-group>
					<el-menu-item v-for="subItem in item.children" :key="subItem.name" :index="subItem.name"
						:route="subItem.path">
						{{subItem.label}}
					</el-menu-item>
				</el-menu-item-group>
			</el-submenu>
		</el-menu>
	</div>
</template>

<style lang="less" scoped>
	.common-aside {
		height: 100vh;
		overflow: hidden;

		.el-menu-vertical-demo:not(.el-menu--collapse) {
			width: 200px;
			height: 100%;
		}

		.el-menu {
			height: 100%;
			border: none;

			&.el-menu--collapse {
				width: 64px;
			}

			.aside-title {
				margin: 0;
				padding: 20px 0;
				color: #FFF;
				text-align: center;
				line-height: 1.5;
				font-size: 16px;
				font-weight: bold;
				border-bottom: 1px solid #409EFF;
				white-space: nowrap;
				overflow: hidden;
			}

			.el-menu-item,
			.el-submenu__title {
				height: 56px;
				line-height: 56px;

				i {
					color: #fff;
					margin-right: 8px;
				}

				&:hover {
					background-color: #409EFF !important;
				}
			}

			.el-menu-item.is-active {
				background-color: #409EFF !important;
			}
		}
	}
</style>

<script>
	export default {
		data() {
			return {
				// 患者菜单数据
				patientMenuData: [{
						path: '/patient',
						name: 'patientHome',
						label: '首页',
						icon: 's-home',
					},
					{
						path: '/patient/appointment',
						name: 'patientAppointment',
						label: '预约挂号',
						icon: 'date',
					},
					{
						path: '/patient/patientRecord',
						name: 'patientRecord',
						label: '我的病历',
						icon: 'document',
					},
					{
						path: '/patient/authorization',
						name: 'authorization',
						label: '授权管理',
						icon: 'collection-tag',
					},
					{
						path: '/patient/patientReport',
						name: 'patientReport',
						label: '检查报告',
						icon: 's-claim',
					},
					{
						path: '/patient/myPrescription',
						name: 'myPrescription',
						label: '我的处方',
						icon: 's-order',
					},
				],
				// 医生菜单数据
				doctorMenuData: [{
						path: '/doctor',
						name: 'doctorHome',
						label: '工作台',
						icon: 's-home',
					},
					{
						path: '/doctor/patients',
						name: 'doctorPatients',
						label: '我的患者',
						icon: 'user',
					},
					{
						name: 'medicalRecordManagement',
						label: '病历管理',
						icon: 'first-aid-kit',
						children: [{
								path: '/doctor/getMedicalRecord',
								name: 'doctorGetMedicalRecord',
								label: '查看病历',
							},
							{
								path: '/doctor/getMedicalReport',
								name: 'doctorGetMedicalReport',
								label: '查看检查',
							},
							{
								path: '/doctor/newMedicalRecord',
								name: 'doctorNewMedicalRecord',
								label: '新建病历',
							},
							{
								path: '/doctor/newMedicalReport',
								name: 'doctorNewMedicalReport',
								label: '新建检查',
							},
						]
					}, 
					{
						name: 'prescriptionManagement',
						label: '处方管理',
						icon: 'tickets',
						children: [
							{
								path: '/doctor/createPrescription',
								name: 'createPrescription',
								label: '查询新建',
							},
							{
								path: '/doctor/myPrescription',
								name: 'myPrescription',
								label: '我的处方',
							}
						]
					},
				],
				// 管理员菜单数据
				adminMenuData: [{
						path: '/admin',
						name: 'adminMain',
						label: '系统概览',
						icon: 's-home',
					},
					{
						name: 'dictManagement',
						label: '字典管理',
						icon: 'user',
						children: [{
								path: '/admin/deptDictManagement',
								name: 'deptDictManagement',
								label: '部门字典',
							},
							{
								path: '/admin/diseaseDictManagement',
								name: 'diseaseDictManagement',
								label: '疾病字典',
							},
							{
								path: '/admin/examItemDictManagement',
								name: 'examItemDictManagement',
								label: '检查项目字典',
							},
							{
								path: '/admin/drugDictManagement',
								name: 'drugDictManagement',
								label: '药品字典',
							}
						]
					},
					{
						path: '/admin/operationLogManagement',
						name: 'operationLogManagement',
						label: '系统日志',
						icon: 'document-copy',
					},
				],
				menuData: []
			};
		},
		created() {
			this.setMenuByUserType();
		},
		methods: {
			handleOpen(key, keyPath) {
				console.log('菜单展开:', key, keyPath);
			},
			handleClose(key, keyPath) {
				console.log('菜单收起:', key, keyPath);
			},
			setMenuByUserType() {
				const userType = this.$store?.state?.user?.usertype;
				console.log('当前用户类型:', userType);

				switch (userType) {
					case 'patient ':
						this.menuData = this.patientMenuData;
						break;
					case 'doctor':
						this.menuData = this.doctorMenuData;
						break;
					case 'admin':
						this.menuData = this.adminMenuData;
						break;
					default:
						this.menuData = this.patientMenuData;
						console.warn('未知用户类型');
				}
			}
		},
		computed: {
			noChilden() {
				return this.menuData.filter(item => !item.children);
			},
			haveChilden() {
				return this.menuData.filter(item => item.children);
			},
			isCollapse() {
				return this.$store?.state?.tab?.isCollapse || false;
			}
		},
		watch: {
			'$store.state.user.usertype': {
				handler(newVal) {
					console.log('用户类型变化:', newVal);
					this.setMenuByUserType();
				},
				immediate: true
			}
		}
	}
</script>